<template>
  <Form :model="roomInfo">
    <FormItem label="会议室ID：">
      <Input v-model="roomInfo.id" disabled></Input>
    </FormItem>
    <FormItem label="会议室名称：">
      <Input v-model="roomInfo.name" disabled placeholder="请输入名称"></Input>
    </FormItem>
    <FormItem label="会议室容量：">
      <Input v-model="roomInfo.capacity" disabled placeholder="请输入容量"></Input>
    </FormItem>
    <FormItem label="会议室地址：">
      <Input v-model="roomInfo.address" disabled placeholder="请输入地址"></Input>
    </FormItem>
    <FormItem label="支持设备：">
        <span v-for="(item,index) in roomInfo.equip" :key="item.device_id">
            {{ item.device_name }}
            <span v-if="index<(roomInfo.equip.length-1)">,</span>
        </span>
    </FormItem>
    <FormItem label="预约审核：">
      <i-switch size="large" :disabled="disabled" v-model="roomInfo.ischeck">
        <span slot="open">启用</span>
        <span slot="close">停用</span>
      </i-switch>
    </FormItem>
    <FormItem label="缩略图：">
      <br>
      <div class="avator">
        <img :src="roomInfo.photo">
      </div>
    </FormItem>
    <FormItem label="状态：">
      <i-switch size="large" :disabled="disabled" v-model="roomInfo.state">
        <span slot="open">启用</span>
        <span slot="close">停用</span>
      </i-switch>
    </FormItem>
  </Form>
</template>

<style lang="less" scoped>
.avator {
  height: 126px;
  width: 19%;
  float: left;
  img {
    margin: 0 auto;
    margin-top: 13px;
    height: 100px;
    width: 100%;
  }
}
</style>

<script>

import { getImage } from '@/libs/util'
import { getRoomInfo } from '@/api/meet'

export default {
  name: 'roomInfo',
  props: {
    room_id: Number
  },
  data () {
    return {
      roomInfo: {
        id: 0,
        name: '',
        photo: '',
        capacity: 0,
        equip: '',
        address: '',
        ischeck: true,
        create_time: '',
        update_time: '',
        create_ip: '',
        state: true
      },
      disabled: false
    }
  },
  watch: {
    room_id () {
      this.getRoomInfo()
    }
  },
  mounted: function () {
    this.getRoomInfo()
  },
  methods: {
    getRoomInfo () {
      if (this.room_id) {
        getRoomInfo(this.room_id).then(res => {
          const data = res.data
          if (data.code === 200) {
            this.roomInfo = data.data
            this.roomInfo.photo = getImage(data.data.photo)
            this.disabled = true
          } else {
            this.$Message.error(data.error)
          }
        }).catch(err => {
          console.log(err)
          this.$Message.error('获取失败')
        })
      }
    }
  }
}
</script>
